import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { stepTitleDefaultProps } from './defaultProps';
import type { StepTitleOptions } from './type';

export interface StepTitleProps extends StepTitleOptions, HTMLAttributes<HTMLDivElement> {}

const StepTitle: FC<StepTitleProps> = (props) => {
  const { className, children, forwardedRef, ...stepTitleProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('title', className), ...stepTitleProps },
    children,
  );
};

StepTitle.displayName = 'StepTitle';
StepTitle.defaultProps = stepTitleDefaultProps;

export default StepTitle;
